<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('account.organization.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="ao_id" label="ID" />

				<el-table-column prop="organization_name" :label="$t('account.organization.name')"
					show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.organization_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="level" :label="$t('account.organization.level')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.level }}
					</template>
				</el-table-column>

				<el-table-column prop="pid" :label="$t('account.organization.higherLevel')" show-overflow-tooltip>
					<template #default="scope">
						{{ getpid(scope.row.pid) }}
					</template>
				</el-table-column>

				<el-table-column prop="sort" :label="$t('machine.types.sort')">
					<template #default="scope">
						{{ scope.row.sort || '1' }}
					</template>
				</el-table-column>

				<el-table-column prop="roleName" :label="$t('machine.types.roles')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.roleName || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="create_time" :label="$t('date.createTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')" width="200">
					<template #default="scope">
						<el-button type="success" size="small" @click="user(scope.row.ao_id)">
							{{ $t('account.organization.role') }}
						</el-button>
						<el-button type="primary" size="small" @click="edit(scope.row)">
							{{ $t('public.modify') }}
						</el-button>
						<el-button v-prmis="'auth_organization_del'" type="danger" size="small"
							@click="del(scope.row.ao_id)">
							{{ $t('public.del') }}
						</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.organa" @exposeData="current" @fraction="fraction" />

		</div>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import hierarchy from '@/utils/hierarchy';
import { getorganizationList, delorganization } from '@/api/account';
import { useRouter } from "vue-router";
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('account.organization.name'), type: 'input', value: '', key: 'organization_name' },
		{ title: $t('account.organization.levels'), type: 'define', select: [], value: '', key: 'pid' },
	],
	list: [], // 列表信息
	original: [], // 原始数据
	organa: { // 筛选数据
		organization_name: '',
		pid: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表
let getlist = () => {
	data.mtloading = true
	getorganizationList(data.organa).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})

}

// 添加组织
let add = () => {
	router.push({ path: '/account/organization/add_info' })
}

// 查看角色组织
let user = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/account/organization/role_info', query: query })
}

// 修改组织
let edit = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/account/organization/details_info', query: query })
}

// 删除组织
let del = (e) => {
	ElMessageBox.confirm($t('message.deleteInfo'))
		.then(res => {
			delorganization({ 'ao_id': e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 归属上级
let getpid = (e) => {
	let name = '总部'
	data.original.map((item => {
		if (item.ao_id == e) {
			name = item.organization_name
		}
	}))
	return name
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.organa[key] = e[key]
	}
	data.organa.page = 1
	data.organa.pageNum = 15
	getlist()
}

// 获取接口信息
let geturl = async () => {
	let select = []
	let arrange = await hierarchy.arrange(1)
	data.original = arrange
	for (let item of arrange) {
		select.push({
			label: item.ao_id + ' - ' + item.organization_name,
			value: item.ao_id,
		})
	}
	for (let item of data.lookup) {
		if (item.key == 'pid') {
			item.select = select
		}
	}
	getlist()
}


// 页数回调
let current = (e) => {
	data.organa.page = e
	geturl()
}

// 条数回调
let fraction = (e) => {
	data.organa.pageNum = e
	geturl()
}


geturl()

</script>
